<template>
	<div style="width: 100%; height: 100vh;" ref="chartDom"></div>
</template>

<script setup>
	import * as echarts from 'echarts';
	import 'echarts-gl';

	var chartDom = ref()


	onMounted(() => {
		console.log(chartDom.value, 13)
		var myChart = echarts.init(chartDom.value);
		// var myChart = echarts.init(chartDom);
		var option;

		option = {
			backgroundColor: '#000',
			globe: {
				baseTexture: '/static/qian.jpg',
				heightTexture: '/static/hou.jpg',
				displacementScale: 0.04,
				shading: 'realistic',
				environment: '/static/zuo.jpg',
				realisticMaterial: {
					roughness: 0.1
				},
				postEffect: {
					enable: true
				},
				light: {
					main: {
						intensity: 5,
						shadow: true
					},
					ambientCubemap: {
						texture:  '/data-gl/asset/pisa.hdr',
						diffuseIntensity: 0.2
					}
				}
			}
		};

		option && myChart.setOption(option);
	})
</script>

<style>

</style>